<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" width="600px" @close="close">
    <div class="form-box">
      <el-form ref="form" :model="form" :inline="false" :rules="rules" label-width="100px" class="demo-ruleForm">
        <span style="color: red;line-height: 24px;">
            王者荣耀：输入任意一个营地ID，即可自动匹配所有官方属性，将官方属性名称及图片同步到本系统
          </span>
        <el-form-item label="目标游戏" prop="name">
          <span>{{ form.copyToGameName }}</span>
        </el-form-item>
        <el-form-item label="营地ID" prop="yingdi">
          <el-input
                  v-model="form.yingdi"
                  placeholder="请输入营地ID"
                ></el-input>
        </el-form-item>
        <div class="center">
          <el-button @click="close()">取消</el-button>
          <el-button type="primary" @click="submitForm('form')" :loading="loading">提交</el-button>
        </div>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import infoApi from "@/api/autoProduction/information.js";
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      roleList:[],


      // 表单参数
      form: {
        yingdi: '',
      },
      title: "快速配置",
      // uploadImgUrl: "",
      rules: {
        yingdi:[
        { required: true, message: "请输入", trigger: "change" }
        ]
      }
    };
  },
  created() {
  },
  methods: {
    // 打开弹窗
    open(data) {
      this.loading = false
      this.form.copyToGameId = data.id
      this.form.copyToGameName = data.name
      this.dialogVisible = true;
    },
    // 重置
    reset() {
      this.$refs.form.resetFields();
    },

    async submitForm(formName) {
      this.$refs["" + formName].validate(async valid => {
        if (valid) {
          this.loading = true
          await this.getRoleList()
          this.loading = false
          this.close()
          this.$emit('close')
        } else {
          this.$alert("请填写完整！");
        }
      });
    },

     //获取角色列表 f17是营地ID
     async getRoleList() {
      if (this.form.yingdi) {
        const res = await infoApi.getRoleListAttr({
            campId: this.form.yingdi,
          })
          if (res.data) {
            if (res.data.length) {
              await this.getRoleInfo(res.data[0].roleId);
            }
          }
      } else {
        this.$alert("请先填写营地ID！");
      }
    },
    //获取角色详情
    async getRoleInfo(roleId) {
      if (roleId) {
        await infoApi.getRoleInfoAttr({
            campId: this.form.yingdi,
            roleId: roleId,
          })
      } else {
        this.$alert("请先选择角色信息！");
      }
    },

    close() {
      this.reset()
      this.dialogVisible = false
    }
  }
};
</script>
<style scoped lang="css">


</style>
